<template>
  <div class="login-warp">
    <div id="echrts">
      <el-container>
        <el-main style="width:100%;height:800px">
          <!-- <el-autocomplete
            class="inline-input"
            v-model="customerNo"
            :fetch-suggestions="querySearch"
            placeholder="请输入客户编号"
            @select="handleSelect"
            style="width:20%">
          </el-autocomplete> -->
          <el-select filterable
                    v-model="customerNo"
                    @change="handleSelect(customerNo)"
                    style="width:30%">
            <el-option
              v-for="item in customers"
              :key="item.customerNo"
              :label="item.customerName"
              :value="item.customerNo">
              <span style="float: left">{{ item.customerName }}</span>
              <span style="float: right; color: #8492a6; font-size: 13px">{{ item.customerNo }}</span>
            </el-option>
          </el-select>
          <div style="margin-top:10px;">
            <el-col :span="12">
              <div id="echartUp" style="width:1000px;height:700px"></div>
            </el-col>
            <el-col :span="12">
              <div id="echartUp2" style="width:100%;height:700px"></div>
            </el-col>
          </div>
        </el-main>
      </el-container>
      <el-footer>
        <el-col :span="4" :offset="20"><el-button type="primary" @click="ifchange=true">修改密码</el-button></el-col>
      </el-footer>
    </div>
    
    <el-dialog title="修改用户密码" :visible.sync="ifchange">
      <el-form :model="changeForm" ref="changeForm">
        <el-form-item label="旧密码" :rules="{required: true, message: '请输入旧密码', trigger: 'blur'}" prop="oldPsw">
          <el-input v-model="changeForm.oldPsw"  placeholder="请输入旧密码"></el-input>
        </el-form-item>
        <el-form-item label="新密码" :rules="{required: true, message: '请输入新密码', trigger: 'blur'}" prop="password">
          <el-input v-model="changeForm.password"  placeholder="请输入新密码"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="ifchange = false">取 消</el-button>
        <el-button type="primary" @click="change">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  export default {
    name: "homepage",
    inject:['reload'],
    data(){
      return{
        customerNo: '',
        customers:[],
        mainBuy:[],
        mainBuyName:[],
        year:'',
        month:'',
        seals:[],
        months:[],
        psw:'',
        ifchange: false,
        changeForm:{
          username:'',
          oldPsw:'',
          password:'',
          phone:'',
          remarks:''
        }
      }
    },
    methods: {
      querySearch(queryString, cb) {
        var customers = this.customers;
        for(let i of this.customers){
          i.value = i.customerNo + "---" + i.customerName;
        }
        customers = this.customers;
        var results = queryString ? customers.filter(this.createStateFilter(queryString)) : customers;
        cb(results);
      },
      createStateFilter(queryString) {
        return (state) => {
          return (state.value.toString().toLowerCase().indexOf(queryString.toLowerCase()) === 0);
        };
      },
      // handleSelect(item) {
      //   // console.log(this.customers)
      //   this.customerNo=item.customerNo;
      //   localStorage.setItem("customerNo",this.customerNo);
      //   this.reload();
      // },
      handleSelect(customerNo) {
        this.customerNo=customerNo;
        localStorage.setItem("customerNo",this.customerNo);
        this.reload();
      },
      load()
      {
        this.$http.get("/hnhyscms_ws/customers/getAllCustomers",{emulateJSON:true}).then(
          success=>{
            this.customers=success.data;
          })
        this.customerNo=localStorage.getItem("customerNo");
        if(this.customerNo===null)
          this.customerNo=this.customers[0].customerNo
        this.year=new Date().getFullYear();
        this.month=new Date().getMonth() + 1;
      },
      async seeAbout(){
        this.seals.length=0;
        this.months.length=0;
        for(var i=0;i<12;i++)
        {
          var nowy=this.year;
          var nowm=this.month-i;
          if(nowm<=0)
          {
            nowy--;
            nowm=12+nowm;
          }
          nowm=nowm<10?String('0'+nowm):(nowm);
          let param={
            "customerNo":this.customerNo,
            "createTime":String(nowy)+String(nowm)
          }
          await this.$http.post("/hnhyscms_ws/orders/seeAbout",param,{emulateJSON:true}).then(
            success=>{
              let orders=success.data
              let sums=0
              for(let i=0;i<orders.length;i++){
                sums+=orders[i].finalTotal
              }
              this.seals.push(sums)
            })
          this.months.push(param.createTime)
        }
        this.months.reverse()
        this.seals.reverse()
        await this.$http.post("/hnhyscms_ws/orderdetails/countByCustomerNo",{"customerNo":this.customerNo},{emulateJSON:true}).then(
          success=>{
            success.data.forEach(item => {
              this.mainBuyName.push(item.productName)
              this.mainBuy.push({
                value:item.amount,
                name:item.productName
              })
            });
          })
      },
      change(){
        this.$refs['changeForm'].validate((valid) => {
          if (valid) {
            let params={
              username:this.changeForm.username,
              password:this.changeForm.password,
              phone:this.changeForm.phone,
              remarks:this.changeForm.remarks,
            }
            if(this.changeForm.oldPsw===this.psw)
              this.$http.post("/hnhyscms_ws/users/change",params,{emulateJSON:true}).then(
                success=>{
                  this.$message({
                    message: '修改成功',
                    type: 'success'
                  });
                  this.ifchange=false
                  localStorage.clear(); 
                  this.$router.push('/login');
                }
              )
            else{
              console.log(this.changeForm.oldPsw)
              console.log(this.psw)
              this.$message.error('旧密码输入错误');
            }
          }
        })
      },
    },
    async mounted() {
      this.load();
      this.changeForm.username=localStorage.getItem("username")
      this.psw=localStorage.getItem("psw")
      console.log(this.psw)
      this.changeForm.phone=localStorage.getItem("phone")
      this.changeForm.remarks=localStorage.getItem("remarks")
      await this.seeAbout();
      let myChart1 = this.$echarts.init(document.getElementById('echartUp'));
      myChart1.setOption({
        title : {
          text: '订单统计',
          subtext: '过去一年该用户订单金额',
          x:'center'
        },
        tooltip: {
          trigger: 'axis'
        },
        xAxis: {
          name: '年月',
          type: 'category',
          data: this.months
        },
        yAxis: {
          name: '月订单额',
          type: 'value'
        },
        series: [{
          name: '月订单额',
          data: this.seals,
          type: 'line',
          smooth:true,//设置折线图平滑
          areaStyle: {
            normal: {
              color: '#275F82' //改变区域颜色
            }
          },
          itemStyle : { 
            normal : { 
              color:'#275F82', //改变折线点的颜色
              lineStyle:{ 
                color:'#253A5D', //改变折线颜色
                width: 5
              } 
            } 
          },
        }]
      });
      let myChart2 = this.$echarts.init(document.getElementById('echartUp2'));
      myChart2.setOption({
        title : {
          text: '购买产品统计',
          subtext: '该用户历史购买商品构成',
          x:'center'
        },
        tooltip: {
          trigger: 'item',
          formatter: '{b}<br/>占比({d}%)'
        },
        legend: {
          left: 'center',
          top: 'bottom',
          data: this.mainBuyName
        },
        toolbox: {
          show: true,
          feature: {
              mark: {show: true},
              dataView: {show: true, readOnly: false},
              restore: {show: true},
              saveAsImage: {show: true}
          }
        },
        series: [{
          type: 'pie',
          radius: [20, 240],
          center: ['50%', '50%'],
          roseType: 'area',
          itemStyle: {
              borderRadius: 5
          },
          label: {
              show: false
          },
          emphasis: {
              label: {
                  show: true
              }
          },
          data: this.mainBuy
        }]
      });
      window.onresize = ()=>{
        myChart1.resize();
        myChart2.resize();
      }
    }
  }
</script>

<style scoped>
.login-wrap{
    position: fixed;
    height:100%;
    width:100%;
    background-color: linear-gradient(left, #11c900, #00ffdc)!important;
    margin:-3.89% 0 0 -0.5%;
  }
</style>
